import React, { useState } from 'react';
import { Layout as AntLayout, theme } from 'antd';
import SideMenu from './layout/SideMenu';
import TopHeader from './layout/TopHeader';

const { Header, Sider, Content } = AntLayout;

const Layout = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);
  const [themeMode, setThemeMode] = useState({ type: 'light' });
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handleToggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  const handleToggleTheme = () => {
    setThemeMode(prev => ({
      type: prev.type === 'light' ? 'dark' : 'light'
    }));
  };

  return (
    <AntLayout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <SideMenu collapsed={collapsed} />
      </Sider>
      <AntLayout>
        <Header
          style={{
            background: colorBgContainer,
          }}
        >
          <TopHeader 
            collapsed={collapsed} 
            onToggleCollapsed={handleToggleCollapsed}
            theme={themeMode}
            onToggleTheme={handleToggleTheme}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          {children}
        </Content>
      </AntLayout>
    </AntLayout>
  );
};

export default Layout; 